<template>
  <div class="rank">
    <h1 class="center">排名</h1>
    <v-list v-for="(item, index) in items" :key="index">
        <v-list-tile>
          <v-icon :color="getRankColor(item.rank)" class="rank-header">{{ getRankIcon(item.rank) }}</v-icon>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.name }}</v-list-tile-title>
            <v-list-tile-sub-title>{{ item.person }}喜欢</v-list-tile-sub-title>
          </v-list-tile-content>
          <v-list-tile-action>
            {{ item.vote }}
          </v-list-tile-action>
        </v-list-tile>
        <v-divider
              v-if="index + 1 < items.length"
              :key="index"
            ></v-divider>
    </v-list>
  </div>
</template>

<script>
  export default {
    name: 'Game',
    data() {
      return {
        items:[
          {
            rank:1,
            name:"黄1",
            person:'爸爸',
            vote:100
          }
        ]
      }
    },
    created() {
      const self = this;
      this.axios.get('/api/ranks')
        .then(function(response) {
          console.log("排行 " + response.data);
          self.items = response.data.ranks;
        })
        .catch(function(error) {
          console.log("error:" + error);
        });
    },
    methods:{
      getRankColor(rank) {
        if(rank == 1) {
          return "orange";
        }
        if(rank == 2) {
          return "grey";
        }
        if(rank == 3) {
          return "yellow";
        }
        return "transparent"
      },
      getRankIcon(rank) {
        if(rank > 3) {
          return "lens"
        }
        return "filter_" + rank;
      }
    }
  } 
</script>

<style scoped>
#name {
  margin: auto;
  width: 100%;
}

#btns {
  margin-top: 50px;
}

.center {
  text-align: center;
}

.game {
  margin: 50px;
  text-align: center;
}

.opbtn {
  margin-left: 40px;
  margin-right: 40px;
  width: 128px;
}

.rank-header {
  margin-left: 16px;
  margin-right: 16px;
}

</style>
